<template>
  <div class="bread-crumb-container">
    <div class="base-item">当前位置</div>
    <div class="item" v-for="item in naviItems" :key="item.text">
      <span class="separator">></span>
      <span :class="getClass(item)" @click="goto(item.to)">{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // redcolor: 'color:#FF0400;',
    };
  },
  props: {
    naviItems: Array,
  },
  methods: {
    // 根据传入的item的属性决定对应的class
    getClass(item) {
      let itemClass = [];
      itemClass.push("text");
      if (item.to) {
        itemClass.push("clickable");
      }
      if (item.color) {
        itemClass.push(item.color + "");
      } else {
        // 默认蓝色
        itemClass.push('blue')
        // 默认白色
        // itemClass.push("white");
      }
      return itemClass.join(" ");
    },
    goto(to) {
      if (!to) {
        // to属性为空，直接返回
        return;
      }
      // 走一遍空页面，迅速返回，刷新组件数据
      this.$router.replace({
        name: "reload",
        params: {
          to,
        },
      });
      return;
    },
  },
};
</script>

<style lang="less" scoped>
div.bread-crumb-container {
  color: #212f9b;
  // color: #f5f5f5;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  div.base-item {
    margin: 3px;
  }
  div.item {
    margin: 3px;
    span.separator {
      margin-right: 4px;
    }
    span.red {
      color: #ff0400;
    }
    span.blue {
      color: #212f9b;
    }
    span.white {
      color: #f5f5f5;
    }
    span.text.blue.clickable:hover {
      cursor: pointer;
      color: #4169e1;
    }
    span.text.red.clickable:hover {
      cursor: pointer;
      color: #ff6347;
    }
    span.text.white.clickable:hover {
      cursor: pointer;
      // color: #ffffff;
      color: #4169e1;
    }
  }
}
</style>